<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>es-sync</title>
    <script src="/js/jquery-3.6.0.js"></script>
</head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0; /* Remove default margin */
        padding-top: 100px;
        font-family: Arial, sans-serif;
    }

    form {
        width: 500px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
        display: block;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    input[type="text"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type="submit"] {
        margin-top: 10px;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #45a049;
    }

    input[type="reset"] {
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="reset"]:hover {
        background-color: #45a049;
    }

    textarea {
        width: 100%; /* 设置宽度 */
        height: 50px; /* 设置高度 */
        border: 1px solid #ccc; /* 设置边框 */
        border-radius: 4px; /* 设置边框圆角 */
        resize: none; /* 禁止用户改变textarea的大小 */
    }

    select {
        /* 基本样式 */
        width: 200px;
        padding: 5px;
        font-size: 16px;
        line-height: 1.5;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;

        /* 移除默认箭头（这取决于浏览器和操作系统） */
        -moz-appearance: none; /* Firefox */
        -webkit-appearance: none; /* Safari 和 Chrome */
        appearance: none;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        z-index: 9999; /* 确保遮盖层在其他内容之上 */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        /* 初始时隐藏 */
        opacity: 0;
        transition: opacity 0.3s ease; /* 添加过渡效果使显示/隐藏更平滑 */
        pointer-events: none; /* 阻止遮盖层上的点击事件 */
    }

    .overlay.active {
        opacity: 1; /* 当激活时显示遮盖层 */
        pointer-events: auto; /* 允许遮盖层上的点击事件（如果需要的话） */
    }

    .loader p {
        color: white; /* 文字颜色为白色，以便在黑色背景上可见 */
        text-align: center; /* 确保文字在loader内部也居中对齐（尽管flex布局已经使其居中） */
        /* 您可以添加其他样式，如字体大小、字体粗细等 */
        font-size: 20px;
        font-weight: bold;
    }

    /* styles.css */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<body>

<div class="overlay">
    <div class="loader">
        <p class="loader-text">数据同步中...</p>
    </div>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close" id="myModalClose">&times;</span>
        <div id="modalData"></div> <!-- 这里将展示Ajax获取的数据 -->
    </div>
</div>

<form action="" method="post" onsubmit="return false">
    <div>
        <input type="submit" id="es-sync-btn" value="普通数据同步"/>
    </div>

    <div style="margin-top: 10px">
        <span style="font-size: 14px; color: grey;">
            普通数据同步说明：<br/>
            1、依据配置文件中配置的内容，同步所有数据（不限制数据数量，耗时较长）
        </span>
    </div>

    <hr/>

    <div>
        <label>sql语句：(eg：SELECT key "mapKey" FROM table_name)</label>
        <textarea name="sql" id="sql"></textarea>
    </div>
    <div>
        <label>关键词：(eg：user_id)</label>
        <input type="text" name="keyWord" id="keyWord" autocomplete="off"/>
    </div>
    <div>
        <label>匹配规则：</label>
        <select name="ruler" id="ruler">
            <option value="equal" selected="selected">精确</option>
            <option value="like">模糊</option>
        </select>
    </div>

    <div>
        <input type="submit" id="from-show" value="待同步数据预览"/>
        <input type="submit" id="from-sub" value="规则数据同步"/>
        <input type="reset"/>
    </div>

    <div style="margin-top: 10px">
        <span style="font-size: 14px; color: grey;">
            规则数据同步说明：<br/>
            1、sql语句：查询结果必须为一列数据，且必须将别名设置为mapKey <br/>
            2、关键词：对应的是es中某个type类型的名称 <br/>
            3、匹配规则：模糊查询为全词全位置查询，不分词
        </span>
    </div>
</form>

</body>
<script type="text/javascript">
    $('#myModalClose').click(function () {
        $('#myModal').hide();
    });

    $('#from-show').click(function () {
        var sql = $('#sql').val();
        var keyWord = $('#keyWord').val();
        var ruler = $('#ruler').val();
        if ('' === sql || '' === keyWord) {
            alert('sql语句/关键词必填！');
            return;
        }

        $.ajax({
                url: '/form/show',
                type: 'post',
                async: false,
                dataType: 'json',
                data: {sql: sql, keyWord: keyWord, ruler: ruler},
                success: function (data) {
                    var dataText = "";
                    for (var i = 0; ; i++) {
                        if (i !== data.length) {
                            var dataTemp = data[i];
                            if (data[i].length >= 100) {
                                dataTemp = data[i].substr(0, 99) + '...';
                            }
                            dataText += '<div>' + dataTemp + '</div>';
                        } else {
                            break;
                        }
                    }

                    dataText = '<h3>' + '共计' + i + '条数据' + '</h3>' + dataText;
                    $("#modalData").html(dataText);
                    $('#myModal').show();
                },
                error: function () {
                    alert("待同步数据预览错误，请重新尝试或联系管理员！");
                }
            }
        );
    });

    $('#from-sub').click(function () {
        var sql = $('#sql').val();
        var keyWord = $('#keyWord').val();
        var ruler = $('#ruler').val();
        if ('' === sql || '' === keyWord) {
            alert('sql语句/关键词必填！');
            return;
        }
        $('.overlay').addClass('active');

        $.ajax({
                url: '/form/sync',
                type: 'post',
                async: true,
                dataType: 'text',
                data: {sql: sql, keyWord: keyWord, ruler: ruler},
                success: function (obj) {
                    alert(obj);
                    $('.overlay').removeClass('active');
                },
                error: function () {
                    alert("规则数据同步错误，请重新尝试或联系管理员！");
                    $('.overlay').removeClass('active');
                }
            }
        );
    });

    $('#es-sync-btn').click(function () {
        $('.overlay').addClass('active');
        $.ajax({
                url: '/es/sync',
                type: 'post',
                async: true,
                dataType: 'text',
                success: function (obj) {
                    alert(obj);
                    $('.overlay').removeClass('active');
                },
                error: function () {
                    alert("普通数据同步错误，请重新尝试或联系管理员！");
                    $('.overlay').removeClass('active');
                }
            }
        );
    });

</script>
</html>